import React from 'react';
import { Grid, Toast } from 'antd-mobile';

import './features.sass';

class Features extends React.Component {
  constructor(props) {
    super(props);
  }

  onClick(el, index) {
    if (index >= 2) {
      console.log(222);
      Toast.fail('开发中', 1, () => {}, false);
    } else if (index === 1) {
      this.props.history.push('/duplicatechecking');
    } else if (index === 0) {
      this.props.history.push('/customer');
    }
  }
  render() {
    const data = [
      {
        icon: 'crmicon-kehuguanli',
        text: '客户管理'
      },
      {
        icon: 'crmicon-crmkehuchazhong',
        text: '客户查重'
      },
      {
        icon: 'crmicon-contract',
        text: '合同管理'
      },
      {
        icon: 'crmicon-customer_pool_line',
        text: '客户公海池'
      },
      {
        icon: 'crmicon-xiaoshouxiansuoguanli',
        text: '线索管理'
      },
      {
        icon: 'crmicon-clue_pool_line',
        text: '线索公海池'
      },
      {
        icon: 'crmicon-kehu',
        text: '客户归属处理'
      },
      {
        icon: 'crmicon-baobeiguanli',
        text: '报备管理'
      },
      {
        icon: 'crmicon-wodeshenpi',
        text: '我的审批'
      }
    ];
    return (
      <div className="features-container">
        <Grid
          data={data}
          columnNum={3}
          // square={false}
          renderItem={(dataItem, index) => (
            <div
              className={
                index >= 2
                  ? 'am-grid-item-inner-content column-num-3 text-disabled'
                  : 'am-grid-item-inner-content column-num-3'
              }
            >
              <i className={`am-grid-icon${index >= 2 ? ' text-disabled' : ''} crmiconfont ${dataItem.icon}`} />
              <div className={`am-grid-text${index >= 2 ? ' text-disabled' : ''}`}>{dataItem.text}</div>
            </div>
          )}
          onClick={(el, index) => {
            this.onClick(el, index);
          }}
        />
      </div>
    );
  }
}

export default Features;
